<template>
  <view class="add-schedule-container">
    <!-- 使用公共自定义导航栏 -->
    <custom-navbar title="添加日程" showBack />
    
    <!-- 主内容区域 -->
    <view class="content-wrapper">
      <!-- 表单区域 -->
      <view class="form-content">
        <!-- 标题输入 -->
        <view class="form-item">
          <input class="title-input" v-model="scheduleTitle" placeholder="日程标题" />
        </view>
        
        <!-- 时间选择 -->
        <view class="form-item">
          <view class="form-label">时间</view>
          <view class="form-group">
            <view class="time-type-selector">
              <view 
                class="time-type-item" 
                :class="{ active: timeType === 'allDay' }" 
                @click="timeType = 'allDay'"
              >全天</view>
              <view 
                class="time-type-item" 
                :class="{ active: timeType === 'specific' }" 
                @click="timeType = 'specific'"
              >具体时间</view>
            </view>
            
            <template v-if="timeType === 'allDay'">
              <view class="date-picker" @click="openDatePicker">
                <text>{{ formatDate(scheduleDate) }}</text>
                <text class="picker-arrow">›</text>
              </view>
            </template>
            <template v-else>
              <view class="date-picker" @click="openDatePicker">
                <text>{{ formatDate(scheduleDate) }}</text>
                <text class="picker-arrow">›</text>
              </view>
              <view class="time-range">
                <view class="time-picker" @click="openStartTimePicker">
                  <text>{{ startTime }}</text>
                  <text class="picker-arrow">›</text>
                </view>
                <text class="time-separator">至</text>
                <view class="time-picker" @click="openEndTimePicker">
                  <text>{{ endTime }}</text>
                  <text class="picker-arrow">›</text>
                </view>
              </view>
            </template>
          </view>
        </view>
        
        <!-- 日历选择 -->
        <view class="form-item">
          <view class="form-label">日历</view>
          <view class="calendar-selector" @click="openCalendarSelector">
            <view class="calendar-dot" :style="{ backgroundColor: '#0066FF' }"></view>
            <text class="calendar-name">默认日历</text>
            <text class="picker-arrow">›</text>
          </view>
        </view>
        
        <!-- 备注输入 -->
        <view class="form-item">
          <textarea class="remark-input" v-model="scheduleRemark" placeholder="添加备注" />
        </view>
      </view>
      
      <!-- 提交按钮 -->
      <view class="submit-area">
        <button class="submit-btn" @click="submitSchedule">保存</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 表单数据
const scheduleTitle = ref('');
const timeType = ref('allDay'); // 'allDay' 或 'specific'
const scheduleDate = ref(new Date());
const startTime = ref('09:00');
const endTime = ref('10:00');
const scheduleRemark = ref('');

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
  const weekDay = weekDays[date.getDay()];
  return `${year}-${month}-${day} 周${weekDay}`;
};

// 打开日期选择器
const openDatePicker = () => {
  uni.showToast({
    title: '打开日期选择器',
    icon: 'none'
  });
};

// 打开开始时间选择器
const openStartTimePicker = () => {
  uni.showToast({
    title: '选择开始时间',
    icon: 'none'
  });
};

// 打开结束时间选择器
const openEndTimePicker = () => {
  uni.showToast({
    title: '选择结束时间',
    icon: 'none'
  });
};

// 打开日历选择器
const openCalendarSelector = () => {
  uni.showToast({
    title: '选择日历',
    icon: 'none'
  });
};

// 提交日程
const submitSchedule = () => {
  if (!scheduleTitle.value) {
    uni.showToast({
      title: '请输入日程标题',
      icon: 'none'
    });
    return;
  }
  
  const scheduleData = {
    title: scheduleTitle.value,
    timeType: timeType.value,
    date: formatDate(scheduleDate.value),
    startTime: timeType.value === 'specific' ? startTime.value : '',
    endTime: timeType.value === 'specific' ? endTime.value : '',
    remark: scheduleRemark.value
  };
  
  console.log('提交日程数据:', scheduleData);
  
  // 实际项目中这里应该调用API
  setTimeout(() => {
    uni.showToast({
      title: '添加成功',
      icon: 'success'
    });
    
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }, 1000);
};
</script>

<style lang="scss" scoped>
.add-schedule-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  
  // 主内容区域
  .content-wrapper {
    margin-top: var(--status-bar-height);
    padding-top: 90rpx; // 导航栏高度
    display: flex;
    flex-direction: column;
    padding-bottom: 40rpx;
    
    // 表单内容
    .form-content {
      background-color: #ffffff;
      padding: 0 40rpx;
      
      .form-item {
        padding: 30rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        .title-input {
          font-size: 32rpx;
          height: 90rpx;
          width: 100%;
        }
        
        .form-label {
          font-size: 30rpx;
          color: #666;
          margin-bottom: 20rpx;
        }
        
        .form-group {
          display: flex;
          flex-direction: column;
        }
        
        .time-type-selector {
          display: flex;
          margin-bottom: 20rpx;
          
          .time-type-item {
            padding: 10rpx 30rpx;
            border-radius: 30rpx;
            font-size: 28rpx;
            color: #666;
            margin-right: 20rpx;
            background-color: #f5f5f5;
            
            &.active {
              background-color: #0066FF;
              color: #ffffff;
            }
          }
        }
        
        .date-picker, .time-picker, .calendar-selector {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 80rpx;
          padding: 0 20rpx;
          background-color: #f5f5f5;
          border-radius: 10rpx;
          margin-bottom: 20rpx;
          font-size: 28rpx;
          
          .picker-arrow {
            font-size: 36rpx;
            color: #999;
            transform: rotate(90deg);
          }
        }
        
        .time-range {
          display: flex;
          align-items: center;
          
          .time-picker {
            flex: 1;
          }
          
          .time-separator {
            margin: 0 20rpx;
            font-size: 28rpx;
            color: #999;
          }
        }
        
        .calendar-selector {
          display: flex;
          
          .calendar-dot {
            width: 24rpx;
            height: 24rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }
          
          .calendar-name {
            flex: 1;
          }
        }
        
        .remark-input {
          width: 100%;
          height: 240rpx;
          font-size: 30rpx;
          line-height: 1.5;
        }
      }
    }
    
    // 提交按钮区域
    .submit-area {
      padding: 40rpx;
      
      .submit-btn {
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        background-color: #0066FF;
        color: #ffffff;
        border-radius: 10rpx;
        font-size: 32rpx;
      }
    }
  }
}
</style> 